<template>
	<div class="m_r">
		<header class="top_bar">
			<a onclick="window.history.go(-1)" class="icon_back"></a>
			<h3 class="cartname">商城注册</h3>
		</header>
		<main class="user_login_box" style="padding-bottom: 20px;height: auto;">
			<div class="login_logo_wrap">

			</div>
			<div class="login_dialog">
				<div class="_username position_rel">
					<img class="login_accout_icon" src="../assets/images/account_icon.png" />
					<input type="text" placeholder="请输入手机号" class="user_input" v-model="cellphone">
				</div>
				<div class="_username position_rel">
					<img class="login_accout_icon" src="../assets/images/username_icon.png" />
					<input type="text" placeholder="请输入用户名" class="user_input" v-model="regname">
				</div>
				<div class="_username u_passwd position_rel">
					<img class="login_accout_icon" src="../assets/images/password_icon.png" />
					<input type="password" name="regpasswd" placeholder="请输入密码" class="user_input" v-model="regpasswd">
				</div>
				<div class="_username u_passwd position_rel">
					<img class="login_accout_icon" src="../assets/images/code_icon.png" />
					<input type="text" name="regpasswd_ag" placeholder="请输入验证码" class="user_input" v-model="code">
					<input :disabled="disabled" type="button" id="btn" @click="getCode" value="免费获取验证码" class="get_code_btn">
				</div>
				<div class="login_box">
					<a @click="goSearch()" class="btn_login" style="font-size: 20px;letter-spacing: 10px;">注册</a>
				</div>
				<div class="go_find_pwd_box">
					<input v-model="isSelected" type="checkbox" name="" id="" value="" style="-webkit-appearance: checkbox; width: 16px; height: 16px;" />
					<label for="">同意</label>
					<router-link tag="span" to="/wx/yonghuxieyi">【用户协议】</router-link>
				</div>
				<div class="go_reg_box">
					<router-link tag="span" to="/wx/login">返回登录</router-link>
				</div>

			</div>
			<div class="" style="clear: both;">

			</div>
		</main>
	</div>
</template>
<script>
	import { Toast } from 'mint-ui';

	export default {
		created() {
			this.referUserId = this.$route.query.referUserId
		},
		data() {
			return {
				regname: '',
				cellphone: '',
				regpasswd: '',
				code: '',
				isSelected: false,
				disabled: false,
				referUserId: '',
				
			}
		},
		methods: {
			goSearch() {
				let _this = this;
				if(_this.isSelected == false) {
					Toast('用户协议没同意!')
					return false;
				}
				if(_this.cellphone === '') {
					Toast('请输入手机号！')
					return false
				}
				_this.$http.post('/base/signUp', {
					CellPhone: _this.cellphone,
					UserName: _this.regname,
					Password: _this.regpasswd,
					code: _this.code,
					ReferUserId: _this.referUserId
				}, localStorage.Authorization, res => {
					if(res.code === 200) {
						Toast({
							message: res.data,
							duration: 1500
						})
						setTimeout(function() {
							_this.$router.push({
								path: '/wx/login'
							});
						}, 1500)

					} else {
						Toast(res.error);

					}
				})

			},
			getCode: function() {
				let _this = this
				if(_this.cellphone === '') {
					Toast('请输入手机号！')
					return false
				}
				var countdown = 60;

				function sendemail() {
					var obj = document.getElementById("btn");
					settime(obj);
				}

				function settime(obj) { //发送验证码倒计时
					if(countdown == 0) {
						_this.disabled = false;
						obj.value = "免费获取验证码";
						countdown = 60;
						return;
					} else {
						_this.disabled = true;
						obj.value = "重新发送(" + countdown + ")";
						countdown--;
					}
					setTimeout(function() {
						settime(obj)
					}, 1000)
				}
				sendemail()
				_this.$http.get('/base/SmsCode', {
					CellPhone: this.cellphone,
				}, localStorage.Authorization, r => {

				})
			},
		},
//		watch: {
//			popupVisible: {
//				handler: function(nval, oval) {
//					console.log('nval', nval)
//					if(this.popupVisible == true) {
//						
//					}
//				}
//			}
//		}
	}
</script>
<style>
	@import '../assets/css/login.css';
</style>
<style scoped="scoped">
	.get_code_btn {
		position: absolute;
		top: 10px;
		right: 20px;
		border: 1px solid red;
		border-radius: 4px;
		padding: 5px 8px;
		color: red;
	}
	
	.go_reg_box xieyi {
		display: inline-block;
		color: #aaa;
		height: 20px;
		line-height: 20px;
		margin-top: 10px;
	}
	.erweima_wrap {
		text-align: center;
		padding: 20px;
	}
	.erweima_wrap img {
		width: 200px;
		height: 200px;
	}
</style>